<template>
    <el-tabs value="门店信息" tab-position="left" id="tabs_tab1">
        <el-tab-pane label="门店信息" name="门店信息">
            <el-form :model="rule_mendian" :rules="rules_mendian" ref="forms" label-width="120px">
                <el-form-item label="门店编号" prop="storeId">
                    <el-select v-model="rule_mendian.storeId" class="input1" placeholder="请选择门店" @change="mendianChange">
                        <el-option v-for="x in typeList" :key="x.id" :label="x.storeCode" :value="x.storeCode"></el-option>
                    </el-select>
                    <el-input class="input2" v-model="rule_mendian.storeCode" placeholder="门店名称" disabled clearable></el-input>
                </el-form-item>
<!--                <el-form-item label="订单名称" prop="orderName">-->
<!--                    <el-input class="input2" placeholder="请填写订单名称" v-model="rule_mendian.orderName" clearable></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="面料来源" prop="fabricSource">-->
<!--                    <el-radio-group v-model="rule_mendian.fabricSource">-->
<!--                        <el-radio-button v-for="x in selOptions.mianliao" :key="x.id" :label="x.dataname" :value="x.id"></el-radio-button>-->
<!--                    </el-radio-group>-->
<!--                </el-form-item>-->
                <el-form-item label="业务类型" prop="businessSource">
                    <el-radio-group v-model="rule_mendian.businessSource">
                        <el-radio-button v-for="x in selOptions.yewu" :key="x.id" :label="x.dataname" :value="x.id"></el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="选择包装" prop="packageType">
                    <el-radio-group v-model="rule_mendian.packageType">
                        <el-radio-button v-for="x in selOptions.package" :key="x.id" :label="x.dataname" :value="x.id"></el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="快递方式" prop="courierId">
                    <el-radio-group v-model="rule_mendian.courierId">
                        <el-radio-button v-for="x in selOptions.kuaidi" :key="x.id" :label="x.id">{{x.courierName}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="地址类型" prop="addressType">
                    <el-radio-group v-model="rule_mendian.addressType" @change="change_address">
                        <el-radio-button label="门店地址" value="门店地址"></el-radio-button>
                        <el-radio-button label="常用地址" value="常用地址"></el-radio-button>
                        <el-radio-button label="其他地址" value="其他地址"></el-radio-button>
                    </el-radio-group>
                </el-form-item>


                <el-form-item label="常用地址" prop="address" v-show="rule_mendian.addressType=='常用地址'">
                    <el-select v-model="kuwei_address" class="input1" placeholder="请选择门店常用地址" @change="get_nomladdress">
                        <el-option v-for="x in kuweilist" :key="x.id" :label="x.storeAddress" :value="x.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="收货地址" prop="address">
                    <el-radio-group>
                        <el-input class="input2" v-if="rule_mendian.addressType != '其他地址'" placeholder="" disabled v-model="rule_mendian.address" clearable></el-input>
                        <el-input class="input2" v-else placeholder="请输入收货地址" v-model="rule_mendian.address2" clearable></el-input>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="收货人" prop="orderName">
                    <el-input class="input2" placeholder="请填写收货人" v-model="rule_mendian.addressPerson" v-show="rule_mendian.addressType!='常用地址'"></el-input>
                    <el-input class="input2" placeholder="请填写收货人" v-model="rule_mendian.addressPerson" disabled v-show="rule_mendian.addressType=='常用地址'"></el-input>
                </el-form-item>
                <el-form-item label="收货电话" prop="orderName">
                    <el-input class="input2" placeholder="请填写收货电话" v-model="rule_mendian.addressPhone" v-show="rule_mendian.addressType!='常用地址'"></el-input>
                    <el-input class="input2" placeholder="请填写收货人" v-model="rule_mendian.addressPhone" disabled v-show="rule_mendian.addressType=='常用地址'"></el-input>
                </el-form-item>
<!--                <el-form-item label="第三方订单号" prop="thirdSn">-->
<!--                    <el-input class="input2" placeholder="请填写运单号" v-model="rule_mendian.thirdSn" clearable></el-input>-->
<!--                </el-form-item>-->
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="顾客信息">
            <el-form :model="rule_kehu" :rules="rules_kehu" ref="forms_kehu" label-width="150px">
                <el-form-item label="顾客姓名" prop="customerName">
                    <el-input class="input2" placeholder="请填写顾客姓名" v-model="rule_kehu.customerName" clearable></el-input>
                </el-form-item>
                <el-form-item label="顾客编号" prop="customerCode">
                    <el-input class="input2" placeholder="自定义编号（选填）" v-model="rule_kehu.customerCode" clearable></el-input>
                </el-form-item>
                <el-form-item label="顾客性别" prop="customerSex">
                    <el-radio-group v-model="rule_kehu.customerSex">
                        <el-radio-button label="男性" value="男性"></el-radio-button>
                        <el-radio-button label="女性" value="女性"></el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import Vue from 'vue'
export default {
    name: 'Tabs1',
    data() {
        return{
            states: true,//true重新绑定
            //#region 门店信息
            typeList: [],//门店数据
            kuweilist:[],//常用地址集合
            kuwei_address:'',//常用地址
            selOptions:{
                mianliao:[],
                yewu:[],
                package:[],
                kuaidi:[],
                address:[]
            },
            rule_mendian: [],
            rules_mendian: {
                storeId: [{ required: true, message: '请选择' }],
                fabricSource: [{ required: true, message: '请选择' }],
                businessSource: [{ required: true, message: '请选择' }],
                packageType: [{ required: true, message: '请选择' }],
                courierId: [{ required: true, message: '请选择' }],
                addressType: [{ required: true, message: '请选择' }],
                // address: [{ required: true, message: '不能为空' }],
                // addressPerson: [{ required: true, message: '不能为空' }],
                // addressPhone: [{ required: true, message: '不能为空' }],
                // orderName: [{ required: true, message: '不能为空' }],,
            },
            //#endregion
            //#region 客户信息
            // rule_kehu: this.$store.state.Order_user_InfoData,
            rule_kehu: [],
            rules_kehu: {
                customerName: [{ required: true, message: '不能为空' }],
                customerPhone: [{ required: true, message: '不能为空' }],
                customerSex: [{ required: true, message: '请选择' }],
            },
            //#endregion
        }
    },
    created() {
        if(!this.states) {
            return false;
        }
        this.states = false;
        this.rule_mendian = this.$store.state.OrderUser.Order_user_InfoData;
        this.rule_kehu = this.$store.state.OrderUser.Order_user_InfoData;
        if(this.$store.state.OrderUser.Order_user_InfoData.customerName==null || this.$store.state.OrderUser.Order_user_InfoData.customerName=='' || this.$store.state.OrderUser.Order_user_InfoData.customerName=='null'){
            this.rule_kehu.customerName='';
        }
        if(this.$store.state.OrderUser.Order_user_InfoData.customerCode==null || this.$store.state.OrderUser.Order_user_InfoData.customerCode=='' || this.$store.state.OrderUser.Order_user_InfoData.customerCode=='null'){
            this.rule_kehu.customerCode='';
        }
        let p1 = new FormData();
        p1.append('token',localStorage.getItem("token"));
        this.$http.post('logic/interface/query_allstore_companyId',p1).then(result => {
			this.rule_mendian
            this.typeList = result.data.data;
			if( this.typeList[0].id!=null&&this.rule_mendian.storeCode==null)
			 this.mendianChange(this.typeList[0].storeCode)
            this.show_address(this.rule_mendian.storeId);//门店的常用地址
        });
        this.getRadioData('mianliao',1);
        this.getRadioData('yewu',2);
        this.getRadioData('package',3);
        this.$http.post('logic/interface/query_allCourier').then(result => {
            this.selOptions.kuaidi = result.data.data;
        });

        // this.mendianChange(this.rule_mendian.storeId);


    },
    destroyed() {
        window.clearInterval(this.jishi);
    },
    methods: {
        change_address(){//改变地址事件
            if(this.rule_mendian.addressType=='常用地址'){
                // this.show_address(this.rule_mendian.storeId);//门店的常用地址
                let p1 = new FormData();
                // p1.append('store_code',this.rule_mendian.storeId);
                p1.append('token',localStorage.getItem("token"));
                this.$http.post('logic/interface/query_storeAddressBycode',p1).then(result => {
                    this.kuweilist = result.data.data;
                    this.kuwei_address=result.data.data[0].id;
                    let p2 = new FormData();
                    p2.append('address_id',result.data.data[0].id);
                    this.$http.post('logic/interface/query_nomladdressById',p2).then(result => {
                        this.rule_mendian.address = result.data.data.storeAddress;
                        this.rule_mendian.address2 = result.data.data.storeAddress;
                        this.rule_mendian.addressPerson = result.data.data.aboutPerson;
                        this.rule_mendian.addressPhone = result.data.data.phone;
                    });
                });
            }else if(this.rule_mendian.addressType=='门店地址'){
                this.kuwei_address='';
                let p = new FormData();
                p.append('store_code',this.rule_mendian.storeId);
                this.$http.post( 'logic/interface/query_storeinfoBycode',p).then(result => {
                    this.rule_mendian.storeId = this.rule_mendian.storeId;
                    this.rule_mendian.storeCode = result.data.data.storeName;
                    this.rule_mendian.address = result.data.data.storeAddress;
                    this.rule_mendian.addressPerson = result.data.data.aboutPerson;
                    this.rule_mendian.addressPhone = result.data.data.phone;
                });
            }else {
                this.kuwei_address='';
                this.rule_mendian.address = '';
                this.rule_mendian.address2 = '';
                this.rule_mendian.addressPerson = '';
                this.rule_mendian.addressPhone = '';
            }
        },
        mendianChange(value) {
            let p = new FormData();
            p.append('store_code',value);
            // this.$http.post(domain.publicUrl + '/logic/interface/query_storeinfoBycode',p).then(result => {
            //     this.rule_mendian.storeId = value;
            //     this.rule_mendian.storeCode = result.data.data.storeName;
            //     this.rule_mendian.address = result.data.data.storeAddress;
            // });
            this.$http.post( 'logic/interface/query_storeinfoBycode',p).then(result => {
                this.rule_mendian.storeId = value;
                this.rule_mendian.storeCode = result.data.data.storeName;
                this.rule_mendian.address = result.data.data.storeAddress;
                this.rule_mendian.addressPerson = result.data.data.aboutPerson;
                this.rule_mendian.addressPhone = result.data.data.phone;
            });
            this.show_address(value);//门店的常用地址
        },
        getRadioData(type,params) {
            let p1 = new FormData();
            p1.append('type',params);
            this.$http.post('logic/interface/query_dataBytype',p1).then(result => {
                this.selOptions[type] = result.data.data;
            });
        },
        show_address(code){
            let p1 = new FormData();
            p1.append('token',localStorage.getItem("token"));
            this.$http.post('logic/interface/query_storeAddressBycode',p1).then(result => {
                this.kuweilist = result.data.data;
                this.kuweilist.map(d=>{
                    if (d.storeAddress == this.rule_mendian.address) {
                        this.kuwei_address=d.id*1;
                    }
                })
            });
        },
        get_nomladdress(){//根据id查询地址详情
            let p1 = new FormData();
            p1.append('address_id',this.kuwei_address);
            this.$http.post('logic/interface/query_nomladdressById',p1).then(result => {
                this.rule_mendian.address = result.data.data.storeAddress;
                this.rule_mendian.address2 = result.data.data.storeAddress;
                this.rule_mendian.addressPerson = result.data.data.aboutPerson;
                this.rule_mendian.addressPhone = result.data.data.phone;
            });
        }
    },
}
</script>

<style scoped lang="scss">
#tabs_tab1 /deep/ .el-tabs .el-tabs__item{font-size: 16px; color: $font_color;}
#tabs_tab1 /deep/ .el-tabs .el-tabs__item.is-active{font-weight: bold; color: #000000;text-decoration:none;}
#tabs_tab1 /deep/ .el-tabs--left .el-tabs__active-bar.is-left, .el-tabs--left .el-tabs__active-bar.is-right, .el-tabs--right .el-tabs__active-bar.is-left, .el-tabs--right .el-tabs__active-bar.is-right{
    width: 4px; background-color: #000000;
}
.input1{display: inline-block; width: 300px; margin-right: 20px;}
.input2{width: 250px;}
#tabs_tab1 /deep/ .el-radio-group label span{border: 1px solid #DCDFE6; border-radius: 4px!important; width: 180px;}
#tabs_tab1 /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner{background: $color;border-color:$color; color: $font_color;box-shadow:-1px 0 0 0 $color;}

</style>
